<!DOCTYPE html>
<html>

<head>
    <title>Test - DELETE</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <style>
        /* Deterministic positions */

        #map {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }

        button {
            position: relative;
            top: 100px;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <button id="visibility">Visibility</button>
    <br/>
    <button id="filter">Filter</button>


    <!-- CDN -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

    <!-- Plugin -->
    <script src="dist/leaflet.canvaslayer.field.js"></script>

    <script>
        /* Basemap */
        let map = L.map("map");
        var url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png';
        L.tileLayer(url, {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
            subdomains: 'abcd'
        }).addTo(map);

        let f = function (v) {
            return v > 0.1;
        };

        let options = {
            onClick: console.log,
            inFilter: null
        };
        let layer = L.canvasLayer.scalarField(null, options).addTo(map);

        d3.text("data/U.asc", function (asc) {
            let s = L.ScalarField.fromASCIIGrid(asc);
            layer.setData(s);
            map.fitBounds(layer.getBounds());
        });

        // Identify
        layer.on('click', function (e) {
            if (e.value !== null) {
                let v = e.value.toFixed(2);
                let html = (`<span class="popupText">${v}</span>`);
                let popup = L.popup().setLatLng(e.latlng).setContent(html).openOn(map);
            }
        });

        // Visibility
        var visibility = document.getElementById('visibility');
        visibility.addEventListener('click', function (e) {
            (layer.isVisible()) ? layer.hide() : layer.show();
        });

        // Filter
        var filter = document.getElementById('filter');
        filter.addEventListener('click', function (e) {
            (layer.options.inFilter) ? layer.setFilter(null) : layer.setFilter(f);
        });
    </script>
</body>

</html>